<template>
    <el-select :value="valueTitle" :disabled="isDisabled" :popper-append-to-body="false" ref="selectRef"
        class="tree-select" :clearable="clearable" @clear="clearHandle">
        <el-option :value="valueTitle" :label="valueTitle" class="options">
            <el-tree id="tree-option" ref="selectTree" :highlight-current="true" :expand-on-click-node="false"
                :accordion="accordion" :data="this.elecOrgTree" :props="this.elecOrgTreeProps" :node-key="this.elecOrgTreeProps.value" :orgId = 'orgId'
                :default-expanded-keys="defaultExpandedKey" :filter-node-method="filterNode"
                @node-click="handleNodeClick"></el-tree>
        </el-option>
    </el-select>
</template>
<script>
import { middleGroundConsApi } from "@/api/orderElec/consumer/middleGroundCons";
export default {
    name: "unit-select",
    props: {
        /* 用户供电单位 */
        orgId: {
            type: String,
            default: ''
        },
        /* 初始值 */
        value: {
            // type: Number,
            default: () => {
                return null;
            },
        },
        /* 可清空选项 */
        clearable: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        /* 自动收起 */
        accordion: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        // 默认展开节点
        defaultExpandedKey: {
            type: Array,
            default: () => {
                return [];
            },
        },
        // 设置禁用
        isDisabled: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            valueId: this.value, // 初始值
            valueTitle: "",
            elecOrgTree: [],
            elecOrgTreeProps: {
                label: "name",
                children: "children",
                value: "id",
            },
        };
    },
    mounted () {
        this.initHandle();
        this.getQueryPowerSupplyUnits();
    },
    methods: {
        //供电下拉框
        getQueryPowerSupplyUnits () {
            let data = { id: this.orgId };
            middleGroundConsApi.queryPowerSupplyUnits(data).then((res) => {
                if (res.code == "200") {
                    this.elecOrgTree = res.data.children;
                }
            });
        },
        // 初始化值
        initHandle () {
            this.valueTitle = "";
            if (this.valueId) {
                this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[
                    this.elecOrgTreeProps.label
                ]; // 初始化显示
                this.$refs.selectTree.setCurrentKey(this.valueId); // 设置默认选中
            }
            this.initScroll();
        },
        // 初始化滚动条
        initScroll () {
            this.$nextTick(() => {
                let scrollWrap = document.querySelectorAll(
                    ".el-scrollbar .el-select-dropdown__wrap"
                )[0];
                let scrollBar = document.querySelectorAll(
                    ".el-scrollbar .el-scrollbar__bar"
                );
                scrollWrap.style.cssText =
                    "margin: 0px; max-height: none; overflow: hidden;";
                scrollBar.forEach((ele) => (ele.style.width = 0));
            });
        },
        // 切换选项
        handleNodeClick (node) {
            this.valueTitle = node[this.elecOrgTreeProps.label];
            this.valueId = node[this.elecOrgTreeProps.value];
            let valueLabelValue = node[this.elecOrgTreeProps.labelValue];
            this.$emit("getValue", this.valueId);
            this.$emit("getLabel", this.valueTitle);
            this.$emit("getLabelValue", valueLabelValue);
            // this.defaultExpandedKey = [];
            this.$refs.selectRef.blur();
        },
        // 清除选中
        clearHandle () {
            this.valueTitle = "";
            this.valueId = null;
            // this.defaultExpandedKey = [];
            this.clearSelected();
            this.$emit("getValue", null);
        },
        /* 清空选中样式 */
        clearSelected () {
            let allNode = document.querySelectorAll("#tree-option .el-tree-node");
            allNode.forEach((element) => element.classList.remove("is-current"));
        },
        filterNode (value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
    },
    watch: {
        value () {
            this.valueId = this.value;
            this.initHandle();
        },
    },
};
</script>

<style lang="scss" scoped>
/* @import "./styles/index"; */
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    max-height: 274px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
}
.el-select-dropdown__item.selected {
    font-weight: normal;
}
ul li >>> .el-tree .el-tree-node__content {
    height: auto;
    padding: 0 10px;
}
.el-tree-node__label {
    font-weight: normal;
}
.el-tree >>> .is-current .el-tree-node__label {
    color: #00607f;
    font-weight: 700;
}
.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
    // color: #606266;
    // font-weight: normal;
}
</style>
